<template>
  <span>
    <svg
      t="1736420889666"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="6739"
      :style="styleCpd"
    >
      <path
        d="M1009.0496 941.4656l-190.5152-186.4704A448.0512 448.0512 0 0 0 931.84 456.8064c0-121.9584-48.4864-236.544-136.4992-322.6112A468.5824 468.5824 0 0 0 466.0224 0.3584a467.3536 467.3536 0 0 0-329.3696 133.6832C48.5888 220.2624 0.1536 334.848 0.1536 456.704c0 121.9072 48.4352 236.544 136.4992 322.56a467.8144 467.8144 0 0 0 329.3696 133.7344 469.248 469.248 0 0 0 281.0368-92.2624l192.7168 188.7744a49.8176 49.8176 0 0 0 69.4272 0 47.4624 47.4624 0 0 0-0.1536-67.9936zM66.2016 461.1072c0-216.4736 189.5424-396.1344 397.8752-396.1344s399.6672 179.6608 399.872 396.1344c0.1024 216.4224-191.5392 392.3968-399.872 392.3968-208.3328 0-397.824-175.9744-397.824-392.3968z"
        fill-opacity=".2"
        p-id="6740"
      ></path>
    </svg>
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { IIconProps } from './type'
const props = withDefaults(defineProps<IIconProps>(), {
  size: 18,
  color: 'rgba(255, 255, 245, 0.86)'
})

// 计算样式
const styleCpd = computed(() => {
  return `fill:${props.color};width:${props.size}px;height:${props.size}px;`
})
</script>

<style scoped>
span {
  display: inline-block;
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  cursor: pointer;
}

.icon:hover {
  opacity: 0.5;
}
</style>
